<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>员工列表</title>
  <style>
    table {border-collapse: collapse; width: 80%; margin: 20px auto;}
    th, td {border: 1px solid #ccc; padding: 8px; text-align: center;}
    th {background-color: #f2f2f2;}
    .search {text-align: center; margin: 10px 0;}
  </style>
</head>
<body>
<div class="search">
    <a href="addEmp.jsp">添加员工</a>
<%--  <form action="${pageContext.request.contextPath}/employee" method="post">--%>
    <input type="text" name="name" placeholder="请输入员工姓名模糊查询" value="${param.name}" id="searchName">
    <input type="button" value="查询" onclick="searchName()" >
<%--  </form>--%>
</div>
<table>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>密码</th>
    <th>头像</th>
    <th>生日</th>
    <th>薪资</th>
    <th>部门ID</th>
    <th>创建时间</th>
    <th>更新时间</th>
    <th>状态</th>
    <th>b海</th>
  </tr>
  <!-- 修复tbody的id闭合问题 -->
  <tbody id="tbs"></tbody>
</table>

<!-- 引入jQuery（确保路径正确） -->
<script src="web/js/jquery.js"></script>
<script>
  $(document).ready(function () {
    getEmployeeList(null);
  });

  function getEmployeeList(name) {
    $.ajax({
      url: "${pageContext.request.contextPath}/employee", // 对应Servlet的路径
      type: "get",
      dataType: "json",
      data:{
        method: "list",
        empName: name
      },
      success: function (response) {
        console.log("返回数据：", response);
        if (response && response.length > 0) {
          // 清空原有内容，避免重复渲染
          $("#tbs").empty();
          // 遍历员工列表
          $.each(response, function (index, employee) {
            let statusText = employee.start == 0 ? '启用' : '删除';
            let editUrl = "${pageContext.request.contextPath}/employee?method=edit&id=" + employee.id;
            let deleteUrl = "${pageContext.request.contextPath}/employee?method=delete&id=" + employee.id;

            let tr = `
              <tr>
                <td>`+employee.id+`</td>
                <td>`+employee.name+`</td>
                <td>`+employee.password+`</td>
                <td><img src="`+employee.image+`" width="50" height="50" alt="头像"></td>
                <td>`+employee.birthday+`</td>
                <td>`+employee.salary+`</td>
                <td>`+employee.depId+`</td>
                <td>`+employee.createTime+`</td>
                <td>`+employee.updateTime+`</td>
                <td>`+statusText+`</td>
                <td>
                  <a href="`+editUrl+`" class="btn edit-btn">编辑</a>
                  <a href="`+deleteUrl+`" class="btn delete-btn" onclick="return confirm('确定要删除该员工吗？')">删除</a>
                 </td>
              </tr>
            `;
            $("#tbs").append(tr);
          });
        } else {
          $("#tbs").html("<tr><td colspan='10'>暂无员工数据</td></tr>");
        }
      },
      error: function (xhr, status, error) {
        console.error("请求失败：", error);
        $("#tbs").html("<tr><td colspan='10'>数据加载失败，请稍后重试</td></tr>");
      }
    });
  }

  function searchName() {
    let name = $("#searchName").val();
    console.log(name)
    getEmployeeList(name);
    return false; // 阻止表单默认提交行为
  }
</script>
</body>
</html>